<template>
  <div
    class="w-5 h-5 border rounded-sm cursor-pointer select-none overflow-hidden"
    @click="checked = !checked"
  >
    <Transition name="fade">
      <div v-if="checked" class="w-full h-full flex-center bg-primary">
        <CheckboxHook />
      </div>
    </Transition>
  </div>
</template>

<script setup lang="ts">
const checked = defineModel<boolean>("checked");
</script>

<style scoped></style>
